<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<body>
    <div id="shoppingCart">
        <table>
            <tr>
                <th><input type="checkbox" v-model="all"></th>
                <th>序号</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>库存</th>
                <th>发行商</th>
                <th>总计</th>
                <th>操作</th>
            </tr>
            <tr v-for="(product, index) in products" :key="product.id">
                <td><input type="checkbox" :value="product.id" v-model="checkedId"></td>
                <td>{{index+1}}</td>
                <td>{{product.product_name}}</td>
                <td>{{product.price}}</td>
                <td>
                    <input type="button" value="-" @click="product.stock--">
                    {{product.stock}}
                    <input type="button" value="+" @click="product.stock++">
                </td>
                <td>{{product.supplier}}</td>
                <td>{{(product.price*product.stock).toFixed(2)}}</td>
                <td><input type="button" value="删除" @click="remove(index)"></td>
            </tr>
        </table>
        <!-- 批量删除， 事实上是没写完的提交，
            绝对不是我懒得写结算页， 所以没有结算， 
            就直接跳到结算后把购物车的对应项目删掉了 -->
        <input type="button" value="批量删除" @click="removeRange">
        <label>合计:{{total}}元</label>
    </div>
    <input type="button" value="test" onclick="alert('a')">

    <script src="./js/vue.js"></script>
    <!-- 原生js写了个只能发 get 请求的鬼东西， 别的都没动，所以除了请求数据都还是本地操作 -->
    <script src="./js/ajax.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>